import React, { PureComponent } from 'react';
import { CenterPage, CenterTopBox, CenterBottomBox } from './style';
import { BorderBox12, BorderBox13 } from '@jiaminghi/data-view-react';
import DailyTransactionBar from './charts/DailyTransactionBar';
import UserBehaviorStats from './charts/UserBehaviorStats';

class index extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      // 每日交易量数据
      dailyTransactionData: {
        categories: ['12-10', '12-11', '12-12', '12-13', '12-14', '12-15'],
        series: [
          {
            name: '每日交易量',
            data: [78.8, 64.5, 99.5, 69.5, 85.5, 89.9],
            colors: ['#ff6b9d', '#ffd700', '#ffd700', '#00ffff', '#ff6b9d', '#00ffff']
          }
        ]
      },
      
      // 用户整体行为可视化数据
      userBehaviorData: {
        pointBehavior: 64975,
        favoriteBehavior: 1895,
        exclusiveCollection: 373,
        bounce: 0.2905,
        retention: 0.1643,
        avgPageViews: 1.43
      }
    };
  }

  componentDidMount() {
    console.log('中间页面组件已加载 - 每日交易量和用户行为数据');
    
    try {
      // 模拟数据更新
      this.dataUpdateTimer = setInterval(() => {
        this.updateTransactionData();
      }, 30000); // 每30秒更新一次数据
      
      console.log('每日交易量数据:', this.state.dailyTransactionData);
      console.log('用户行为数据:', this.state.userBehaviorData);
    } catch (error) {
      console.error('中间页面数据加载失败:', error);
    }
  }

  componentWillUnmount() {
    if (this.dataUpdateTimer) {
      clearInterval(this.dataUpdateTimer);
    }
  }

  // 更新交易数据
  updateTransactionData = () => {
    try {
      const { dailyTransactionData } = this.state;
      const newData = dailyTransactionData.series[0].data.map(value => 
        value + (Math.random() - 0.5) * 2
      );
      
      this.setState({
        dailyTransactionData: {
          ...dailyTransactionData,
          series: [{
            ...dailyTransactionData.series[0],
            data: newData
          }]
        }
      });
      
      console.log('交易数据已更新');
    } catch (error) {
      console.error('交易数据更新失败:', error);
    }
  }

  render() {
    const { dailyTransactionData, userBehaviorData } = this.state;
    
    return (
      <CenterPage>
        {/* 顶部 - 每日交易量 */}
        <CenterTopBox>
          <BorderBox12 className='center-top-borderBox'>
            <div className='center-top'>
              <div className='title-dis'>
                <span>
                  <i className='iconfont'>&#xe88e;</i>
                  每日交易量
                </span>
                <span>
                  今日完成:
                  <span className='title-dis-keyword'>1,234笔</span>
                </span>
              </div>
              {/* 每日交易量条形图 */}
              <DailyTransactionBar data={dailyTransactionData} />
            </div>
          </BorderBox12>
        </CenterTopBox>

        {/* 底部 - 用户整体行为可视化 */}
        <CenterBottomBox>
          <BorderBox13 className='center-bottom-borderBox'>
            <div className='center-bottom'>
              {/* 用户行为统计 - 现在包含自己的标题 */}
              <UserBehaviorStats data={userBehaviorData} />
            </div>
          </BorderBox13>
        </CenterBottomBox>
      </CenterPage>
    );
  }
}

export default index;
